<template>
    <div class="indexBox">
        <!-- 搜索 -->
        <search @on-submit="goSearchPage" :auto-fixed="true" v-model="keyWord"
                class="searchBox"></search>
        <!-- 顶部背景 -->
        <!--        @on-focus="goSearchPage"-->
        <div class="topbg">
            <img src="../assets/images/bg01.png" alt/>
        </div>
        <div class="logo">

            <img src="../assets/images/logoSet.png" alt style="width: 100px;height: 40px"/>
            <!--            <span class="English">Welcome you to run he jiao'yu</span>-->
        </div>

        <swiper :list="goodsImgList" :auto="true" :interval="3000" class="bannerBox"></swiper>
        <!-- 菜单 -->
        <tab class="menus" active-color="#3499ff">
            <tab-item
                    class="menu"
                    v-for="(item, index) in categoryList"

                    :key="item.id"
                    @on-item-click="toMenuJump(item.id,index)"
            >
                <div class="menuIcon">
                    <img src="../assets/images/defaultMenu.png" alt class="buyCourse"/>
                </div>
                <span>{{item.name}}</span>
            </tab-item>
        </tab>

        <!-- 资讯 -->
        <div class="noticeBox">
            <img src="../assets/images/notice.png" class="noticeIcon" alt/>
            <swiper auto height="18px" direction="vertical" :interval="2000" class="text-scroll" :show-dots="false">
                <swiper-item v-for="(item,key) in infoLists" :key="key">
                    <router-link :to="{name:'informationInfo',query:{id:item.id}}">
                        <div v-html="item.title"></div>
                    </router-link>
                </swiper-item>
            </swiper>
        </div>
        <!-- 直播课程 -->
        <div class="module">
            <div class="module_title flex_sb">
                <div class="titleName">推荐课程</div>
                <router-link to="/recommended-courses">
                    <div class="more flex">
                        查看更多
                        <x-icon type="ios-arrow-right" class="moreIcon" size="20"></x-icon>
                    </div>
                </router-link>
            </div>

            <!-- <scroller lock-y scrollbar-x> -->
            <div class="scrollBox clearfix">
                <div v-for="(item,index) in courses" class="courses" :key="index">
                    <div class="posi_rela" @click="hreftwo(item.id)">
                        <img :src="item.largePicture" class="courseBg" alt/>
                        <div class="teacherInfo">
                            <div class="posi_relaInner">
                                <img src="../assets/images/bg02.png" class="nameLabel" alt/>
                                <span class="teacherName">{{item.nickName}}老师</span>
                                <img :src="item.largeAvatar" class="teacherHead" alt/>
                            </div>
                        </div>
                        <div class="courseState">
                            <img src="../assets/images/bg03.png" class="stateBg" alt/>
                            <img src="../assets/images/icon01.png" class="stateIcon" alt/>
                            <span class="stateTxt">更新中</span>
                        </div>
                        <div class="liveTips">{{item.studentNum}}人学习中</div>
                    </div>
                    <div class="courseInfo">
                        <div class="courseTitle">{{item.title}}</div>
                        <div class="coursePrice">
                            <div class="fs_18">
                                {{item.lessonNum}}课时/
                                <span class>￥{{item.price/100}}</span>
                            </div>
                            <div class="courseTips">会员免费</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- </scroller> -->
        </div>
        <!-- 热门课程 -->
        <div class="module_title">
            <div class="titleName">
                热门课程
                <span class="explain">专注打造 品质保障</span>
            </div>
        </div>
        <!-- tab导航 -->
        <div class="navTabList">
            <tab :line-width="2" active-color="#1f7aff">
                <tab-item class="vux-center" :selected="0 == index" v-for="(item, index) in categoryList"
                          @click.native="tabClike(item.id)" :key="item.id">{{item.name}}
                </tab-item>
            </tab>
        </div>
        <!-- 内容板块 -->
        <swiper :show-dots="false" ref="cateSwiper" :min-moving-distance="100"
                @on-get-height="getPageHeight">
            <swiper-item>
                <div class="softwareBox">
                    <ul class="softwareListBox clearfix">
                        <li v-for="(item2, index2) in listContent">
                            <!--                        <li v-for="item2 in courseList">-->
                            <router-link to="">
                                <!--                            <router-link :to="{name:'courseDetails-buy',params:{id:item2.id}}">-->
                                <div class="item-ans" @click="hreftwo(item2.id)">
                                    <div class="courseImg" v-if="item2.largePicture !=''">
                                        <img class="img" :src="item2.largePicture"/>
                                    </div>
                                    <div class="courseImg" v-if="item2.largePicture ==''">
                                        <img class="img" src="../assets/images/courseSet.png"/>
                                    </div>


                                    <div class="hotCourseInfo">
                                        <div class="hotCourseInfo_title">{{item2.title}}</div>
                                        <div class="hotCourseInfo_count">{{item2.lessonNum}}课时 |
                                            {{item2.studentNum}}人学过
                                        </div>
                                        <div class="mt_35">
                                            <span class="price_now">￥{{item2.price/100}}</span>
                                            <span class="price_now tags" v-if="item2.vipLevelName !=''">{{item2.vipLevelName}}</span>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </swiper-item>
        </swiper>

        <TabBar></TabBar>
    </div>
</template>

<script>
    import TabBar from "../components/tabBar";
    import {Tab, TabItem, Swiper, Search, SwiperItem, Scroller} from "vux";
    import {
        infoList,
        parentCategoryList,
        parentCourseList,
        rotationCharts,
        recommendCourse,
        userInfo
    } from '@/api/index/index';
    import {confirmCourse} from '@/api/index/study';
    import store from "../store/store";

    export default {
        components: {
            Tab,
            TabItem,
            TabBar,
            Swiper,
            Search,
            SwiperItem,
            Scroller
        },
        data() {
            return {
                courseList: [],
                code: '',
                vipInfo: '',
                infoLists: [],
                categoryList: ["全部", "建档", "促排", "取卵", "移植", "保胎", "全部", "建档", "促排", "取卵", "移植", "保胎"],
                tabIndex: 1,
                goodsImgList: [],
                menusList: [
                    {
                        unique: "1",
                        src: require("../assets/images/menu01.png"),
                        text: "语文"
                    },
                    {
                        unique: "2",
                        src: require("../assets/images/menu02.png"),
                        text: "数学"
                    },
                    {
                        unique: "3",
                        src: require("../assets/images/menu03.png"),
                        text: "英语"
                    },
                    {
                        unique: "4",
                        src: require("../assets/images/menu04.png"),
                        text: "物理"
                    },
                    {
                        unique: "5",
                        src: require("../assets/images/more.png"),
                        text: "更多"
                    }
                ],
                courses: [],
                list: ["全部", "语文", "数学", "英语", "物理", "化学", "生物"],
                // 软件列表数据
                listContent: [],
                keyWord: "",
            };
        },
        mounted() {
            console.log(this.$store.state.user.name);
            console.log(this.$store.state.user.id);
            if (this.$store.state.user.tenantId == '' || this.$store.state.user.tenantId == undefined) {
                var tenantId = '4ZMNZFG4CM';
            } else {
                var tenantId = this.$store.state.user.tenantId;
            }
            infoList(tenantId).then(res => {
                console.log(res.data.data.list)
                this.infoLists = res.data.data.list
            }).catch(err => {
                console.log(err)
            });
            rotationCharts(tenantId).then(res => {
                console.log(res.data.data);
                this.goodsImgList = res.data.data.list;
            }).catch(err => {
                console.log(err)
            });
            parentCategoryList(tenantId, 'course').then(res => {
                this.categoryList = res.data.data.categorys
            }).catch(err => {
                console.log(err)
            });

            recommendCourse(tenantId).then(res => {
                console.log(res.data.data.list);
                this.courses = res.data.data.list;
            }).catch(err => {
                console.log(err)
            });
            this.getTabInfo();
            this.getAuthCode();
            this.share();
            this.getTenantId();
        },
        methods: {
            onSubmit() {
                console.log(this.keyWord)
            },
            tabClike(index) {
                this.tabIndex = index
                this.getTabInfo()

            },
            hreftwo(id) {
                console.log(this.$store.state.user.id);
                if (this.$store.state.user.id == '') {
                    this.$router.push({name: 'courseDetails-noBuy', query: {id: id}})
                } else {
                    userInfo(this.$store.state.user.id).then(res => {
                        console.log(res.data.data);
                        this.vipInfo = res.data.data.vipInfo;

                    }).catch(err => {
                        console.log(err)
                    });

                    confirmCourse(this.$store.state.user.id, id).then(res => {
                        console.log(res.data.data);
                        if (res.data.data.members == "true" || res.data.data.courseInfo.price == 0) {
                            if (res.data.data.courseInfo.type == 'live') {
                                this.$router.push({name: 'courseDetails-buy-live', query: {id: id}})
                            } else {
                                this.$router.push({name: 'courseDetails-buy', query: {id: id}})
                            }

                        } else if (res.data.data.members == "false") {
                            //判断用户会员等级是否大于课程等级
                            console.log(this.vipInfo.sortField);
                            console.log(res.data.data.courseInfo.vipLevelId);
                            if (this.vipInfo.sortField >= res.data.data.courseInfo.vipLevelId) {
                                if (res.data.data.courseInfo.type == 'live') {
                                    this.$router.push({name: 'courseDetails-buy-live', query: {id: id}})
                                } else {
                                    this.$router.push({name: 'courseDetails-buy', query: {id: id}})
                                }
                            } else {
                                this.$router.push({name: 'courseDetails-noBuy', query: {id: id}})
                            }

                        }
                    }).catch(err => {
                        console.log(err)
                    });
                }

            },
            // tab列表
            getTabInfo() {
                if (this.$store.state.user.tenantId == '') {
                    var tenantId = '4ZMNZFG4CM';
                } else {
                    var tenantId = this.$store.state.user.tenantId;
                }
                parentCourseList(this.tabIndex, tenantId).then(res => {
                    console.log(res.data.data.list);
                    this.listContent = res.data.data.list

                }).catch(err => {
                    console.log(err)
                });
            },

            getTenantId() {
                var tenantId = this.getUrlParam("tenantId"); //
                if (tenantId != '') {
                    this.$store.commit('setUser', {tenantId: tenantId})
                } else {
                    this.$store.commit('setUser', {tenantId: "4ZMNZFG4CM"})
                }
            },
            getAuthCode() {
                var appid = "wxda53a4a8b2d85023"; //为测试号id
                var code = this.getUrlParam("code"); //
                var local = "http://www.rhyun.top/#/index";
                if (code == null || code === "") {
                    //不存在就打开上面的地址进行授权
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&response_type=code&scope=snsapi_userinfo&redirect_uri=${encodeURIComponent(local)}&state=1#wechat_redirect`;
                } else {
                    this.code = code
                }
            },
            share() {
                //分享后的课程
                if (this.$store.state.user.courseId > 0) {
                    confirmCourse(this.$store.state.user.id, this.$store.state.user.courseId).then(res => {
                        console.log(res.data.data);
                        if (res.data.data.members == "true" || res.data.data.courseInfo.price == 0) {
                            if (res.data.data.courseInfo.type == 'live') {
                                this.$router.push({
                                    name: 'courseDetails-buy-live',
                                    query: {id: this.$store.state.user.courseId}
                                })
                            } else {
                                this.$router.push({
                                    name: 'courseDetails-buy',
                                    query: {id: this.$store.state.user.courseId}
                                })
                            }
                        } else if (res.data.data.members == "false") {
                            //判断用户会员等级是否大于课程等级
                            console.log(this.vipInfo.sortField);
                            console.log(res.data.data.courseInfo.vipLevelId);
                            if (this.vipInfo.sortField >= res.data.data.courseInfo.vipLevelId) {
                                if (res.data.data.courseInfo.type == 'live') {
                                    this.$router.push({
                                        name: 'courseDetails-buy-live',
                                        query: {id: this.$store.state.user.courseId}
                                    })
                                } else {
                                    this.$router.push({
                                        name: 'courseDetails-buy',
                                        query: {id: this.$store.state.user.courseId}
                                    })
                                }
                            } else {
                                this.$router.push({
                                    name: 'courseDetails-noBuy',
                                    query: {id: this.$store.state.user.courseId}
                                })
                            }
                        }
                    }).catch(err => {
                        console.log(err)
                    });
                }
            },


            getUrlParam(paraName) {
                var url = document.location.toString();
                var arrObj = url.split("?");

                if (arrObj.length > 1) {
                    var arrPara = arrObj[1].split("&");
                    var arr;

                    for (var i = 0; i < arrPara.length; i++) {
                        arr = arrPara[i].split("=");

                        if (arr != null && arr[0] == paraName) {
                            return arr[1];
                        }
                    }
                    return "";
                } else {
                    return "";
                }
            },
            goSearchPage() {
                if (this.keyWord != "") {
                    this.$router.push({name: 'searchCourse', query: {keyWord: this.keyWord}})
                }
            },


            toMenuJump(ID, Index) {
                this.$router.push("/discover");
                this.$router.push({name: 'discover', query: {id: ID, index: Index}})
            }
            ,
            getPageHeight() {
                let topHeight = document.getElementsByClassName("vux-slider")[0]
                        .offsetTop,
                    diffHeight = window.screen.height - topHeight - 40;
                this.$nextTick(() => {
                    this.$refs.cateSwiper.xheight = diffHeight + "px";
                });
            }
        }
    }
    ;
</script>

<style lang="less" scoped>
    .indexBox {
        padding-bottom: 120px;

        .searchBox {
            /deep/ .weui-search-bar {
                position: absolute;
                padding: 8px 10px;
                left: 20px;
                right: 20px;
                top: 0;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                box-sizing: border-box;
                background-color: transparent;
            }

            /deep/ .weui-search-bar:before {
                content: none;
            }

            /deep/ .weui-search-bar::after {
                content: none;
            }

            /deep/ .weui-search-bar__cancel-btn {
                color: #fff;
            }
        }

        .topbg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: -1;
            background: #fff;
            // height: 930px;
            img {
                width: 100%;
                height: 490px;
            }
        }

        .logo {
            margin: 80px 40px 0;

            img {
                width: 64px;
                height: 34px;
            }

            .name {
                color: #fff;
                margin-left: 16px;
                font-size: 46px;
            }

            .English {
                display: block;
                color: #fff;
                font-size: 18px;
                margin-top: 10px;
            }
        }

        .bannerBox {
            margin: 20px 40px;
            border-radius: 40px;

            /deep/ .vux-swiper {
                height: 280px !important;
            }

            /deep/ .vux-img {
                border-radius: 40px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        /* 菜单 */

        .menus {
            margin: 0 10px;

            &.vux-tab-wrap {
                height: 60px;
            }

            /deep/ .vux-tab-container {
                height: 120px;

                .vux-tab {
                    height: 120px;

                    .vux-tab-item {
                        line-height: 1.1;
                        background: none;
                    }
                }
            }

            .menu {
                width: 20%;
                display: inline-block;
                text-align: center;
                padding-top: 20px;
                position: relative;

                .menuIcon {
                    height: 52px;
                    line-height: 52px;

                    img {
                        width: 40px;
                        height: 40px;
                    }
                }

                span {
                    font-size: 30px;
                }
            }
        }

        /* 资讯 */

        .noticeBox {
            display: flex;
            align-items: center;
            padding: 20px;
            border-top: 1px solid #f8f9fa;
            border-bottom: 20px solid #f8f9fa;

            .noticeIcon {
                width: 96px;
                height: 37px;
                margin: 0 20px;
            }

            .text-scroll {
                width: 30%;
                flex-grow: 1;
                line-height: 1.5;
                overflow: hidden;
                white-space: nowrap;
            }
        }

        /* 直播课程 */

        .module {
            border-bottom: 20px solid #f8f9fa;

            .module_title {
                padding: 20px;
                font-size: 30px;

                .more {
                    font-size: 28px;

                    color: #919191;

                    .moreIcon {
                        fill: #919191;
                    }
                }
            }

            .scrollBox {
                display: flex;
                padding: 20px 0;
                margin: 0 auto;
                width: 96%;
                box-sizing: border-box;
                overflow-x: auto;
                position: relative;

                .courses {
                    display: inline-block;
                    margin-right: 20px;
                    width: 48%;
                    flex-shrink: 0;
                    // float: left;
                    .posi_rela {
                        position: relative;
                        width: 100%;

                        .courseBg {
                            display: block;
                            width: 100%;
                            // height: 218px;
                        }

                        .teacherInfo {
                            position: absolute;
                            top: 28px;
                            left: 0;

                            .posi_relaInner {
                                .nameLabel {
                                    width: 50%;
                                    height: 55px;
                                }

                                .teacherName {
                                    position: absolute;
                                    top: 10px;
                                    left: 10px;
                                    font-size: 20px;
                                    color: #fff;
                                    opacity: 0.9;
                                }

                                .teacherHead {
                                    width: 58px;
                                    height: 60px;
                                    margin-left: -20px;
                                }
                            }
                        }

                        .courseState {
                            position: absolute;
                            bottom: 0;
                            left: 10px;
                            width: 140px;

                            .stateBg {
                                width: 100%;
                                height: 40px;
                            }

                            .stateIcon {
                                position: absolute;
                                top: 6px;
                                left: 8px;
                                width: 24px;
                                height: 24px;
                            }

                            .stateTxt {
                                position: absolute;
                                top: 2px;
                                left: 40px;
                                opacity: 0.8;
                                font-size: 18px;
                                color: #fff;
                            }
                        }

                        .liveTips {
                            position: absolute;
                            bottom: 10px;
                            left: 150px;
                            font-size: 14px;
                            color: #fff;
                            background: rgba(0, 0, 0, 0.2);
                            height: 40px;
                            line-height: 40px;
                            padding: 0 5px;
                            border-radius: 5px;
                            text-align: center;
                        }
                    }

                    .courseInfo {
                        background: #fff;
                        border-radius: 0 0 16px 16px;
                        padding: 10px;
                        box-shadow: 0 0 10px 5px #ddd;

                        .courseTitle {
                            font-size: 22px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        .coursePrice {
                            display: flex;
                            justify-content: space-between;
                            margin-top: 10px;
                            align-items: center;

                            .fs_18 {
                                font-size: 26px;
                                flex-shrink: 0;

                                span {
                                    font-size: 24px;
                                    color: #fa2a01;
                                }
                            }

                            .courseTips {
                                color: #ac8250;
                                border: 2px solid #ac8250;
                                border-radius: 20px;
                                padding: 4px 10px;
                                flex-shrink: 0;
                            }
                        }
                    }
                }
            }
        }

        /* 热门课程 */

        .module_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;

            .titleName {
                font-size: 34px;
                font-weight: 600;
                color: #282828;

                .explain {
                    font-size: 24px;
                    font-weight: normal;
                    margin-left: 10px;
                }
            }
        }

        // tab导航
        .navTabList {
        }

        // tab内容板块
        /deep/ .vux-swiper {
            overflow-y: auto;
        }

        .softwareBox {
            .softwareListBox {
                margin: 0;
                list-style: none;

                li {
                    a {
                        color: currentColor;

                        .item-ans {
                            width: 100%;
                            display: flex;
                            padding: 20px;
                            box-sizing: border-box;

                            .courseImg {
                                img {
                                    width: 312px;
                                    height: 182px;
                                    display: block;
                                }
                            }

                            .hotCourseInfo {
                                margin-left: 30px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                .hotCourseInfo_title {
                                    font-size: 30px;
                                }

                                .hotCourseInfo_count {
                                    font-size: 24px;
                                    color: #9d9d9d;
                                    /*margin-top: 10px;*/
                                }

                                .price_now {
                                    color: #f14927;
                                    font-size: 36px;
                                }

                                .tags {
                                    margin-left: 20px;
                                    font-size: 24px;
                                    border: 2px solid #f98e48;
                                    padding: 0 8px;
                                    border-radius: 20px;
                                }

                                .price_before {
                                    font-size: 22px;
                                    color: #a5a5a5;
                                    text-decoration: line-through;
                                }

                                .hotCourseInfo_tips {
                                    font-size: 24px;
                                    color: #b48a59;
                                    margin-left: 24px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
